<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="{{url}}/style/style.css">
  {{block head}}
  <style>{{userStyle}}</style>
  {{/block}}
</head>
<body>
<div class="wrapper">
  <div class="left">
    <button id="btn">模板</button>
  </div>
  <div class="center">
    <div id="content"></div>
  </div>
  <div class="right">
  <div id="attr"></div>
  <hr>
  <div>
    <form id="tdkForm">
      <div>
        标题：<input type="text" name="title">
      </div>
      <div>
        关键字：<input type="text" name="key">
      </div>
      <div>
        描述：<input type="text" name="description">
      </div>
      <button id="tdkOnSave">确定</button>
    </form>
  </div>
</div>
</div>
<script src="{{url}}/libs/jquery.min.js"></script>
<script src="{{url}}/libs/lib_template-web.js"></script>
<script>
  const attrDict = {
    span: {
      'font-size': {
        label: '字体大小',
        value: ''
      },
      'background-color': {
        label: '背景颜色',
        value: ''
      }
    },
    p: {
      'line-height': {
        label: '行高',
        value: ''
      }
    }
  }
  $('#btn').on('click', function() {
    $.get('{{url}}/template/header.art', function(res) {
      var render = template.compile(res);
      var str = render();
      document.getElementById('content').innerHTML = str;
    })
  })
  let className = ''
  $('#content').on('click', '[data-edit]', function() {
    $('#content').find('[data-edit]').removeClass('focus')
    $(this).addClass('focus')
    className = $(this).prop('class').split(' ')[0]
    const data = $(this).data()
    const style = window.getComputedStyle(this, null)
    for(let key in attrDict[data.edit]) {
      attrDict[data.edit][key].value = style[key]
    }
    $.get('{{url}}/template/attr.art', function(res) {
      var render = template.compile(res);
      var str = render({attr: attrDict[data.edit]});
      document.getElementById('attr').innerHTML = str;
    })
  })
  $('#attr').on('click', '#attrOnSave', function(event) {
    event.preventDefault();
    $('#content').find('[data-edit]').removeClass('focus')
    const formData = $('#attrForm').serializeArray()
    let str = `.${className} {`
    for (let item of formData) {
      str += item.name + ': ' + item.value + ';'
    }
    str += '}'
    $.post('{{url}}/api/attrSet', {str}, function(res) {})
  })
  $('#attr').on('change', 'input', function() {
    const name = $(this).prop('name')
    const val = $(this).val()
    $('.' + className).css(name, val)
  })
  $('#tdkOnSave').on('click', function() {
    event.preventDefault();
    const formData = $('#tdkForm').serializeArray()
    const obj = {}
    for (let item of formData) {
      obj[item.name] = item.value
    }
    $.ajax({
      type: 'POST',
      url: '{{url}}/api/tdkSet',
      contentType: 'application/json',
      dataType: 'json',
      data:JSON.stringify(obj),
      function(res) {}
    })
  })
</script>
</body>
</html>
